<template>
  <div>
    <nav-bar title="空床查询">
    </nav-bar>
    <div class="maxinBox">
      <van-dropdown-menu>
        <van-dropdown-item v-model="form.dormBuild" :options="dormBuildList" @change="changeDormBuild" />
        <van-dropdown-item v-model="form.dormNum" :options="dormNumList" @change="getDormList" />
      </van-dropdown-menu>
      <div class="personalManage backgroundfff marginTop5">
        <van-row class="personalData" v-for="(item, index) in dormList" :key="index">
          <van-col :span="24" style="font-size: 1rem;color: #333;">
            {{item.buildName || '--'}} {{item.roomNumber || '--'}}号房间
          </van-col>
          <van-col :span="24" style="color: #666;text-align: center;">
            <van-row>
              <van-col :span="6" style="margin-top: 0.3125rem;" v-for="(item1, index1) in item.bedList" :key="index1">
                <span style="padding: 0.3125rem 0.625rem;border: 0.0625rem solid #666;">{{item1.bedNumber || '--'}}号床</span>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import dormManageAPI from '../../../../api/workAPI/dormManageAPI.js'
  export default {
    data() {
      return {
        projectId: localStorage.getItem('projectId'),
        taskname: '',
        user: {
          userStatus: '',
          userType: '',
        },
        form: {
          dormNum: '',
          dormBuild: '',
        },
        dormBuildList: [],
        dormNumList: [],
        dormList: []
      }
    },
    methods: {
      // 查询宿舍楼列表
      getDormBuildList() {
        dormManageAPI.getDormBuildList(this.projectId).then(res => {
          this.dormBuildList = res
          this.dormBuildList.unshift({
            text: '宿舍楼号',
            value: ''
          })
        })
      },
      // 房间编号查询
      getDormNumList() {
        let data = {
          buildId: this.form.dormBuild
        }
        dormManageAPI.getDormNumList(this.projectId, data).then(res => {
          this.dormNumList = res.list.map(item => {
            return {
              text: item.roomNumber,
              value: item.roomId,
              pageSize: 500,
              pageNum: 1,
            }
          })
          this.dormNumList.unshift({
            text: '房间编号',
            value: ''
          })
        })
      },
      getDormList() {
        let data = {
          buildId: this.form.dormBuild,
          roomId: this.form.dormNum,
          pageSize: 500,
          pageNum: 1,
        }
        dormManageAPI.getEmptyList(this.projectId, data).then(res => {
          this.dormList = res
        })
      },
      changeDormBuild() {
        this.form.dormBuild = this.form.dormBuild
        this.form.dormNum = ''
        this.getDormNumList()
        this.getDormList()
      }
    },
    mounted() {
      this.user.userStatus = localStorage.getItem('userStatus')
      this.user.userType = localStorage.getItem('userType')
      this.getDormBuildList()
      this.getDormNumList()
      this.getDormList()
    }
  }
</script>

<style scoped lang="scss">
  /deep/ .van-dropdown-menu__bar{
    box-shadow: inherit;
  }
  .van-col--14 .van-cell{
    line-height: 1.75rem;
  }
  .personalManage{
    .personalData{
      padding: 0.9375rem;
      font-size: 0.875rem;
      border-bottom: 0.0625rem solid #E5E5E5;
      div{
        padding: 0.125rem 0;
      }
    }
  }
  .tableData{
    font-size: 0.875rem;
    .tableContent:nth-child(2n){
      padding: 0.625rem 0.9375rem;
      color: #666;
    }
    .tableContent:nth-child(2n + 1){
      padding: 0.625rem 0.9375rem;
      color: #666;
      background-color: #F6FAFF;
    }
    .tableTitle{
      padding: 0.625rem 0.9375rem;
      background-color: #F6F6F6;
      height: 1.25rem;
      color: #999;
    }
  }
</style>
